<template>
  <div class="da">
    <div class="box">
      <div class="header">
        <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
          <template #action>
            <div @click="onClickButton">搜索</div>
          </template>
        </van-search>
      </div>
      <div class="meddle">
        <ul>
          <li>华为</li>
          <li>华为</li>
          <li>华为 平板</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为 手机</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为 手机</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为 平板</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
          <li>华为</li>
        </ul>
      </div>
    </div>
    <router-view></router-view>
    <div class="footer">
      <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">搜索</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
        <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>

</template>
<script setup>
import { ref } from 'vue';
const active = ref(1);
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.da {
  width: 100%;
  height: 100%;
}

.da {
  flex: 1;
  overflow: auto;
  flex-direction: column;
}

.box {
  flex-direction: column;
  flex: auto;
  overflow: auto;
}

.header {
  flex: 1;
  overflow: auto;
}

.meddle {
  flex: 1;

}

.footer {
  flex: 1;
  height: 50px;
  overflow: auto;
}
</style>
